
<template>
  <transition name="slide" appear>
    <!-- 评论组件： -->
    <div class="comment-bigwrap">
      <title-bar :title="title"></title-bar>
      <div class="songsheet-detail w700">
        <div class="cover-img" v-lazy:background-image="this.info.coverImgUrl"></div>
        <div class="detail-desc-box">
          <h6>{{this.info.name}}</h6>
          <div class="author">
            <div class="author-avator" v-lazy:background-image="this.info.creator.avatarUrl"></div>
            <div class="author-name">by {{this.info.creator.nickname}}</div>
          </div>
        </div>
        <i class="iconfont iconarrnormal"></i>
      </div>
      <div class="split"></div>
      <div class="comment-tit-switch w700">
        <div class="switch-tit">评论区</div>
        <div class="comment-category">
          <span :class="{active:commentCate===1}" @click="handleCateClick(1)">最新</span>
          <span :class="{active:commentCate===2}" @click="handleCateClick(2)">热评</span>
        </div>
      </div>
      <keep-alive>
        <comment-list
          :comments="CommentsResult"
          @scrollBottom="getMoreComment"
          ref="comentlist"
          :hasMore="hasMore"
          v-show="commentCate===1"
        ></comment-list>
      </keep-alive>
      <keep-alive>
        <comment-list
          :comments="HotCommentsResult"
          @scrollBottom="getMoreComment"
          ref="comentlist"
          v-show="commentCate===2"
        ></comment-list>
      </keep-alive>
    </div>
  </transition>
</template>

<script>
import { getSongsComment, getPlaylistComment } from "@/request/api";
import commentList from "@/base/comments/commentList";
import TitleBar from "@/base/title-bar/title-bar";

import { createCommnent } from "@/common/comment";
export default {
  data() {
    return {
      id: this.$route.query.songid,
      info: this.$route.query.info,
      type: 2,
      CommentsResult: [],
      HotCommentsResult: [],
      limit: 20,
      hasMore: false,
      offset: 0,
      page: 0,
      total: 0,
      commentCate: 1,
      //热评总条数
      hottotal: 0,
      // 是否第一次读取热评：
      loadhot: 0,
      // 修复better-scroll BUG
      clickFromSwitch: false,
      hotlen: 0,
      title: "评论"
    };
  },
  computed: {
    commentCategory() {
      return this.commentCate === 1 ? "最新" : "最热";
    }
  },
  created() {
    this._getComment();
  },
  methods: {
    async _getComment() {
      // 有id代表获取的是歌曲：
      if (this.id) {
        this.title = "歌曲评论";
        var { comments, more, total } = await getSongsComment(this.id, {
          type: this.type,
          limit: this.limit,
          offset: this.offset
        });
      } else {
        // 没id代表获取的歌单
        this.title = "歌单评论";
        var { comments, more, total } = await getPlaylistComment(this.info.id, {
          type: this.type,
          limit: this.limit,
          offset: this.offset
        });
      }
      this.hasMore = more;
      this.CommentsResult = [
        ...this.CommentsResult,
        ...this._normalizeComments(comments)
      ];
      this.clickFromSwitch = false;
    },
    async _getHotComment() {
      if (this.id) {
        var { hotComments, moreHot } = await getSongsComment(this.id, {
          limit: 15
        });
      } else {
        var { hotComments, moreHot } = await getPlaylistComment(this.info.id, {
          limit: 15
        });
      }
      this.HotCommentsResult = [
        ...this.HotCommentsResult,
        ...this._normalizeComments(hotComments)
      ];
      this.clickFromSwitch = false;
    },

    _normalizeComments(list) {
      let ret = [];
      list.forEach(item => {
        let temp = createCommnent(item);
        ret.push(temp);
      });
      return ret;
    },
    getMoreComment() {
      if (this.clickFromSwitch) {
        return;
      }
      // 在最新评论下获取更多：
      if (this.commentCate === 1) {
        if (this.hasMore === false) {
          this.$toast("没有更多评论啦");
          return;
        }
        this.page++;
        this.offset += this.limit;
        this._getComment();
        console.log("获取更多最新评论");
      } else {
        if (this.loadhot === 1) {
          return;
        }
        this.loadhot++;
        this.$toast("没有更多热评啦");
      }
    },
    handleCateClick(i) {
      // 如果当前就是选中项则直接返回
      this.clickFromSwitch = true;
      if (this.commentCate === i) {
        return;
      }
      this._clearData();
      if (i === 1) {
        this.commentCate = 1;
        this._getComment();
      }
      if (i === 2) {
        this.commentCate = 2;
        this.loadhot++;
        this._getHotComment();
      }
    },
    _clearData() {
      // 清空查询参数：
      this.limit = 20;
      this.hasMore = true;
      this.page = 0;
      this.CommentsResult = [];
      this.HotCommentsResult = [];
      this.offset = 0;
      this.loadhot = 1;
    }
  },
  components: {
    commentList,
    TitleBar
  }
};
</script>

<style lang="less" scoped>
.comment-bigwrap {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #222;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}
.slide-enter,
.slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
.back {
  position: absolute;
  top: 0;
  left: 6px;
  z-index: 50;
  i {
    display: block;
    padding: 10px;
    font-size: 22px;
    color: #ffcd32;
    font-size: 24px;
  }
}
.title {
  position: absolute;
  top: 0;
  left: 10%;
  z-index: 40;
  width: 80%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  .title_num {
    font-size: 14px;
  }
}

.songsheet-detail {
  .flex-row-nowrap;
  margin-top: 60px;
  .cover-img {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    border-radius: 6px;
    background-color: #fff;
    .bz(cover);
    position: relative;
    .desc {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 12px;
      .flex-row-nowrap(center);
      i {
        font-weight: bold;
        font-size: 12px;
      }
      span {
        margin-left: 5px;
      }
    }
  }
  .detail-desc-box {
    flex: 1;
    width: 100%;
    padding-left: 0.4533rem;
    h6 {
      font-size: 0.4rem;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .author {
      margin-top: 0.4rem;
      .flex-row-nowrap(center);

      .author-avator {
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        .bz(cover);
      }
      .author-name {
        font-size: 0.2933rem;
        margin: 0 5px;
        .sl;
      }
      i {
        font-size: 0.2933rem;
      }
    }
    .sheet-desc-bottom {
      margin-top: 0.24rem;
      .flex-row-nowrap(center);
      .sheet-desc {
        font-size: 12px;
        line-height: 1.8;
        // height: 48px;
        overflow: hidden;
        color: #eee;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      i {
        font-size: 12px;
        color: #eee;
      }
    }
  }
}
.split {
  width: 100%;
  height: 0.13rem;
  background-color: #333;
  margin: 0.3rem 0;
  margin-bottom: 0.4rem;
}
.comment-tit-switch {
  font-size: 16px;
  .cf;
  .flex-nowrap-sb(center);
  .switch-tit {
    font-size: 16px;
    font-weight: bold;
  }
  .comment-category {
    .flex-row-nowrap;
    span {
      font-size: 14px;
      line-height: 1;
      padding: 0 8px;
      opacity: 0.7;
      &.active {
        opacity: 1;
      }
      &:last-child {
        border-left: 1px solid #f6f6f6;
      }
    }
  }
}
</style>